<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h1>插值语法 - 用来解析VUE中的数据</h1>
      <p>1-{{title}}</p>
      <p v-html="title">可以解析html标签</p>
      <p v-text="title">可以转义html标签</p>
      <p v-text="1+1"></p>
      <h2 v-if="flag">真 - 条件渲染</h2>
      <h2 v-else>假 - 条件渲染</h2>
      <h3 v-show="!flag">只是由css控制显示或隐藏，而不是真正的条件渲染</h3>
      <ul>
        <li v-for="(val,idx) in arr">{{idx}} - {{val}}</li>
      </ul>
      <ol>
        <li v-for="(val,idx) in bigArr" :key="idx">
          <span>{{val.title}}</span>
          <ul>
            <li v-for="item in val.items">{{item}}</li>
          </ul>
        </li>
      </ol>
      <button @click="show = !show">点击切换用户名和密码</button>
      <input type="text" v-if="show" placeholder="用户名" style="background: red;" key="1">
      <input type="text" v-else placeholder="密码" style="background: green;" key="2">
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    // 参数为对象,对象内部的属性是配置信息,也叫选项
    var vm = new Vue({
      el: "#app",   // 绑定视图容器
      data:{        // 对象类型，用来定义了数据
        title: "<em>hello VUE</em>",
        flag:true,
        arr:["a","b","c"],
        bigArr:[{
          title:"大菜",
          items:["红烧肉","酸菜鱼","鸡公煲"]
        },{
          title:"中菜",
          items:["蒜薹炒肉","木须肉","地三鲜"]
        },{
          title:"小菜",
          items:["凉拌黄瓜","花生米"]
        }],
        obj:{
          name:"admin",
          age:18
        },
        show:true
      }
    })
    
    // 列表中的key
    // var arr = [0,1,2,3,4,5];
    
    // 不加key
    // 在2和3中间插入一个数据a
    // 先保存3,将a覆盖3,
    // 再保存4,将3覆盖4
    // 再保存5,将4覆盖5
    // 将5直接插入列表最后
    
    // 加key
    // 根据key值,直接定位到列表的位置,插入
    
    
    
    // 条件渲染中的key
    // 不加key
    // vue无法判断每个组件的不同,就会重复使用某些相同组件
    // 加key
    // 对于vue来说,每个组件都是不同的,切换时,都会重新渲染
    
    
    
    // vue建议,列表中的所有项买都需要添加不同的key
    //  列表中的key,尽量不要使用遍历的数据的index
    
  </script>
</html>
